<style>
  .icon-Gm-sort-default:before{
    font-size: 22px;
    position: absolute;
    top:50%;
    left:70%;
    transform: translate(0,-60%);
  }
  .icon-Gm-sort-ascending,.icon-Gm-sort-descending{
    position: absolute;
    top:50%;
    left:70%;
    transform: translate(0,-60%);
  }
  .gjsj{
    float: left;
    padding-left: 20px;
  }
  .calendar_container{
    width: 180px;
  }
</style>

<section id="customer" class="pl-24 pr-24">
  <div class="clearfix cr-head pt-10">
    <div class="pull-left">招商管理</div>
    <div class="pull-right">
      <button
        v-if="permissions.indexOf('c44') > -1"
        @click="customerFlag = !customerFlag"
        class="n-btn-outline br-4">新建客户</button>
    </div>
  </div>
  <div class="dy-flex mt-10">
    <div class="dy-fx-1 line-height-34">创建时间</div>
    <div class="dy-fx-11 dy-flex" style="align-items: center">
      <div class="calendar_container">
        <web-calendar type="primary" v-model="beginTime" :afterdate="endTime" tips="起始日期"></web-calendar>
      </div>
      <span style="margin:0 10px">-</span>
      <div class="calendar_container">
        <web-calendar type="primary" v-model="endTime" :beforedate="beginTime" tips="截止日期"></web-calendar>
      </div>
    </div>
    <div class="dy-fx-1"></div>
  </div>
  <div class="dy-flex mt-10 border-b pb-10">
    <div class="dy-fx-1 line-height-34">信息搜索</div>
    <div class="dy-fx-3 line-height-34">
      <input
        type="text"
        class="form-control color-666"
        placeholder="客户/联系人/联系方式"
        v-model="params.keywork"
        autocomplete="off"
        @keyup.enter="getCrList"
        >
    </div>
    <div class="dy-fx-1 line-height-34" v-if="policysList.indexOf('d4') > -1">
      <span class="pl-24">对接人</span>
    </div>
    <div class="dy-fx-3 line-height-34 relative" v-if="policysList.indexOf('d4') > -1">
      <input
        type="text"
        class="form-control color-666"
        placeholder="对接人/对接人联系方式"
        v-model="rperson.name"
        @input="onInputDJR"
        autocomplete="off"
        @keyup.enter="getCrList"
        >
        <ul
          class="append-temp absolute bg-fff border z-998 line-height-34"
          style="left:0; top:35px; max-height:200px; overflow-y:scroll; width: 100%; text-indent:0.8em;"
          v-if="rperson.list.length > 0">
          <li v-for="item in rperson.list" :key="item.userId" class="clearfix" @click="setRperson(item.userName, item.userId)">
            <span class="pull-left">{{item.userName}}</span>
            <span class="pull-right">{{item.userPhone}}</span>
          </li>
        </ul>
    </div>
    <div class="dy-fx-5">
      <button class="br-4 btn mr-10 s-btn-default ml-24" type="button" @click="getCrList1">查询</button>
      <button type="button" class="br-4 btn s-btn-default" @click="resetButton">重置</button>
    </div>
    <div class="dy-fx-4" v-if="!(policysList.indexOf('d4') > -1)"></div>
  </div>
  <div class="cr-subnav mt-10">
    <ul class="clearfix">
      <li
        :class="{'pull-left':1, 'pl-24':1, 'pr-24':1, 'line-height-34':1, active: item.name === subnavAct}"
        @click="subnavTab(item.name, item.type, item.state)"
        v-for="(item, index) in subNav">
        {{item.name}}
        ({{item.num}})
      </li>
    </ul>
  </div>
  <div class="br-4 box-i-shadow-2 mt-10">
    <div class="dy-flex text-center color-gray cr-list">
      <div class="dy-fx-1 plr-2">序</div>
      <div class="dy-fx-4 plr-2">客户名称</div>
      <div class="dy-fx-3 plr-2">创建时间</div>
      <div class="dy-fx-3 plr-2">更新时间</div>
      <div class="dy-fx-3 plr-2 cursor relative" @click="upSort">
        <span class="gjsj">跟进时间</span>
        <span class="icon-Gm-sort-default bt-icon"><span class="path1" style="fontSize:22px"></span><i class="path2" style="fontSize:22px"></i></span>
      </div>
      <div class="dy-fx-2 plr-2">类型</div>
      <div class="dy-fx-4 plr-2">获取渠道</div>
      <div class="dy-fx-2 plr-2">状态</div>
      <div class="dy-fx-2 plr-2">对接人</div>
      <div class="dy-fx-2 plr-2">操作</div>
    </div>
    <div class="dy-flex text-center cr-list border-t" v-for="(item, index) in crList.customers">
      <div class="dy-fx-1 plr-2">
        {{index < 9 ? '0' + (index+1) : (index+1)}}
      </div>
      <div class="dy-fx-4 plr-2 ellipsis-1">{{item.name}}</div>
      <div class="dy-fx-3 plr-2 ellipsis-1">{{item.createTime | formatDate}}</div>

      <div class="dy-fx-3 plr-2 ellipsis-1">{{item.updateTime | formatDate}}</div>
      <div class="dy-fx-3 plr-2 ellipsis-1">{{item.recordTime | formatDate}}</div>
      <div class="dy-fx-2 plr-2 ellipsis-1">{{item.type | customerType}}</div>
      <div class="dy-fx-4 plr-2 ellipsis-1">{{item.channelType | customerChannelType}}</div>
      <div class="dy-fx-2 plr-2 ellipsis-1">{{item.customerState | customerState}}</div>
      <div class="dy-fx-2 plr-2 ellipsis-1">{{item.rpersonName || '--'}}</div>
      <div class="dy-fx-2 plr-2 ellipsis-1">
        <a
          :href="'#/customerDetail?id='+item.id+'&ddtab=true'"
          class="check-btn mr-5 cursor"
          target="_blank"
          @click="seeInfo(item.id)">查看</a>
        <a
          :href="'#/customerDetail?id='+item.id+'&ddtab=true'"
          class="check-btn cursor"
          target="_blank"
          v-if="permissions.indexOf('c44') > -1"
          @click="followInfo(item.id)">跟进</a>
      </div>
    </div>
  </div>
  <div class="user-page ptb-10 clearfix">
    <div class="pull-left user-page-num">
      <span class="font-14">共<i>{{crList.totalCount}}</i>条记录</span>
      <span>每页
        <div class="select-ul pagenums">
          <span class="select-name br-4 box-i-shadow">{{limitArr[0]}}</span>
          <ul>
            <li v-for="item in limitArr" @click="setLimit(item)">{{item}}</li>
          </ul>
        </div> 条
      </span>
    </div>
    <div class="pull-right">
      <ul class="page" id="page"></ul>
    </div>
  </div>

  <div class="cr-newAdd-wrap" v-if="customerFlag">
    <div class="cr-newAdd">
      <div class="title">新建客户</div>
      <div class="cr-close" @click="backButton">×</div>
      <div style="height: 350px; overflow-y: scroll; width: 817px;">
      <div class="clearfix">
        <div class="pull-left line-height-34" style="width:150px;"><span class="pl-24"><span class="required">*</span>客户类型：</span></div>
        <div class="pull-left">
          <ul class="cr-type-select clearfix">
            <li
              :class="{active: item.code == customerParams.typeAct}"
              v-for="item in customerParams.type" @click="customerType(item.code)">{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div class="dy-flex mt-10">
        <div class="dy-fx-3 line-height-34">
          <span class="pl-24"><span class="required">*</span>客户名称：</span>
        </div>
        <div class="dy-fx-5 line-height-34  pr-24">
          <input
            type="text"
            class="form-control box-i-shadow"
            v-model="addParams.name"
            autocomplete="off">
        </div>
        <div class="dy-fx-2 line-height-34">
          <span class="pl-24"><span class="required">*</span>所属行业：</span>
        </div>
        <div class="dy-fx-5 line-height-34 pr-24">
          <div class="select-ul">
            <span class="select-name br-4 box-i-shadow">请选择</span>
            <ul>
              <li v-for="item in customerParams.industry" @click="setIndustry(item.dictCode)">{{item.dictName}}</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 公司 -->
      <div class="dy-flex mt-10" v-if="customerParams.typeAct === 'QY' ">
        <div class="dy-fx-3 line-height-34">
          <span class="no-required"></span>
          <span class="pl-24">纳税人识别号：</span>
        </div>
        <div class="dy-fx-5 line-height-34  pr-24">
          <input
            type="text"
            class="form-control box-i-shadow"
            v-model="addParams.idcode"
            autocomplete="off">
        </div>
        <div class="dy-fx-2 line-height-34">
          <span class="no-required"></span>
          <span class="pl-24">公司邮箱：</span>
        </div>
        <div class="dy-fx-5 line-height-34 pr-24">
          <input
            type="text"
            class="form-control box-i-shadow"
            v-model="addParams.email"
            @blur="blurPhone"
            autocomplete="off">
        </div>
      </div>

      <!-- 个人 -->
      <div class="dy-flex mt-10" v-if="customerParams.typeAct === 'PE' ">
        <div class="dy-fx-3 line-height-34">
          <span class="no-required"></span>
          <span class="pl-24">身份证号：</span>
        </div>
        <div class="dy-fx-5 line-height-34  pr-24">
          <input
            type="text"
            class="form-control box-i-shadow"
            v-model="addParams.idcode"
            autocomplete="off">
        </div>
        <div class="dy-fx-2 line-height-34">
          <span class="no-required"></span>
          <span class="pl-24">个人邮箱：</span>
        </div>
        <div class="dy-fx-5 line-height-34 pr-24">
          <input
            type="text"
            class="form-control box-i-shadow"
            v-model="addParams.email"
            @blur="blurPhone"
            autocomplete="off">
        </div>
      </div>

      <div class="dy-flex mt-10">
        <div class="dy-fx-3 line-height-34">
          <span class="no-required"></span>
          <span class="pl-24">联系人：</span>
        </div>
        <div class="dy-fx-5 line-height-34  pr-24">
          <input
            type="text"
            class="form-control box-i-shadow"
            v-model="addParams.rperson"
            autocomplete="off">
        </div>
        <div class="dy-fx-2 line-height-34">
          <span class="no-required"></span>
          <span class="pl-24">联系电话：</span>
        </div>
        <div class="dy-fx-5 line-height-34 pr-24">
          <input
            type="text"
            class="form-control box-i-shadow"
            v-model="addParams.phone"
            @blur="blurPhone"
            autocomplete="off">
        </div>
      </div>
      <div class="dy-flex mt-10">
        <div class="dy-fx-3 line-height-34">
          <span class="pl-24"><span class="required">*</span>获取渠道：</span>
        </div>
        <div class="dy-fx-5 line-height-34  pr-24">
          <div class="select-ul">
            <span class="select-name br-4 box-i-shadow">请选择</span>
            <ul>
              <li v-for="item in customerParams.channel" @click="setChannel(item.code)">{{item.name}}</li>
            </ul>
          </div>
        </div>
        <div class="dy-fx-2 line-height-34">
          <span class="no-required"></span>
          <span class="pl-24">渠道名称：</span>
        </div>
        <div class="dy-fx-5 line-height-34 pr-24">
          <input
            type="text"
            class="form-control box-i-shadow"
            v-model="addParams.qdName"
            autocomplete="off">
        </div>
      </div>
      <div class="dy-flex mt-10">
        <div class="dy-fx-3 line-height-34">
          <span class="pl-24"><span class="required">*</span>状态：</span>
        </div>
        <div class="dy-fx-5 line-height-34  pr-24">
          <div class="select-ul">
            <span class="select-name br-4 box-i-shadow">请选择</span>
            <ul>
              <li v-for="item in customerParams.pylcType" @click="setpylcType(item.code)">{{item.name}}</li>
            </ul>
          </div>
        </div>
        <div class="dy-fx-7 line-height-34 pr-24">
          <span class="pl-24"><span class="required">*</span>是否黑名单：</span>
          <ul class="cr-type-select clearfix inline">
            <li
              :class="{active: item.code == customerParams.stateAct}"
              v-for="item in customerParams.state" @click="customerState(item.code)">{{item.name}}</li>
          </ul>
        </div>
      </div>
      <div class="mt-10 clearfix">
        <div class="line-height-34 pull-left" style="width:150px;">
          <span class="no-required"></span>
          <span class="pl-24">客户备注：</span>
        </div>
        <div class="pr-24 pull-left" style="width:643px;">
          <textarea class="cr-textarea box-i-shadow" v-model="addParams.memo"></textarea>
        </div>
      </div>
      <div class="clearfix ml-24 mr-24 border-t ptb-10 mt-10">
        <!-- radio -->
        <div class="clearfix" v-for="item in typeArcms.radio" v-if="item.isValid == 'true'">
          <div class="pull-left mr-24 line-height-34" style="width: 95px;"><span style="margin-left:-5px;" v-if="item.isRequired == 'true'" class="required">*</span>{{item.displayName}}：</div>
          <div class="pull-left">
            <ul class="cr-type-select clearfix">
              <li :class="{active: item1 == item.act}" v-for="item1 in item.fieldRange.split(',')" @click="item.act = item1">{{item1}}</li>
            </ul>
          </div>
        </div>
        <!-- checkbox -->
        <div class="clearfix" v-for="(item, index) in typeArcms.check" v-if="item.isValid == 'true'">
          <div class="pull-left mr-24 line-height-34" style="width: 95px;"><span style="margin-left:-5px;" v-if="item.isRequired == 'true'" class="required">*</span>{{item.displayName}}：</div>
          <div class="pull-left" style="margin-left:22px;">
            <span
              style="line-height: 32px;"
              :class="{'js-set': true, 'js-q-active': item.act.indexOf(item1) > -1}"
              @click="checkRadio(index, item1)"
              v-for="item1 in item.fieldRange.split(',')">{{item1}}</span>
          </div>
        </div>
        <!-- input -->
        <div class="clearfix" v-for="(item, index) in typeArcms.input" v-if="item.isValid == 'true'" style="margin-top:5px;">
          <div class="pull-left mr-24 line-height-34" style="width: 95px;"><span style="margin-left:-5px;" v-if="item.isRequired == 'true'" class="required">*</span>{{item.displayName}}：</div>
          <div class="pull-left"><input type="text" class="form-control box-i-shadow" v-model="item.act"></div>
        </div>
        <!-- textarea -->
        <div class="clearfix mt-5" v-for="(item, index) in typeArcms.text" v-if="item.isValid == 'true'">
          <div class="pull-left mr-24 line-height-34" style="width: 95px;"><span style="margin-left:-5px;" v-if="item.isRequired == 'true'" class="required">*</span>{{item.displayName}}：</div>
          <div class="pull-left"><textarea style="min-width: 500px; max-width: 600px; height: 120px;" class="form-control box-i-shadow" v-model="item.act"></textarea></div>
        </div>
      </div>
      </div>
      <div class="button-box">
        <button class="n-btn-primary br-4" @click="newAddCustomer">新建</button>
        <button class="n-btn-outline ml-5 br-4" @click="backButton">返回</button>
      </div>
    </div>
  </div>
</section>
<script src="modules/customer/scripts/customer.js" charset="utf-8"></script>
